<%@page import="java.util.Date"%>
<%@page import="itsm.isperp.framework.core.context.ContextHolder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%
	String path = request.getContextPath();
	String basePath = ContextHolder.getWebServerName(request);
%>
<link rel="stylesheet" type="text/css"
	href="<%=path%>/css/mobile/mobile.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/css/basic.css" />

<link rel="stylesheet" type="text/css" href="<%=path%>/css/basic.css" />
<link rel="stylesheet" type="text/css"
	href="<%=path%>/css/ztree/zTreeStyle.css" />
<script type="text/javascript" src="<%=path%>/wro/basic.js"></script>
<script type="text/javascript" src="<%=path%>/js/widget/tree.js"></script>

<link rel="stylesheet" type="text/css"
	href="<%=path%>/css/global_help.css" />
<script type="text/javascript">
	function toLocation(link) {
		var base = document.getElementsByTagName("base")[0].getAttribute("href");
		window.location.href = base + "/" + link;
	}
</script>


<script type="text/javascript"
	src="<%=path%>/js/libs/my97DatePicker/WdatePicker.js"></script>

<style type="text/css">
* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

body {
	color: #666;
	font: 12px/1.5 Arial;
}
/* star */
.star {
	position: relative;
	margin: 5px auto;
	height: 24px;
}

.star ul,#star span {
	float: left;
	display: inline;
	height: 19px;
	line-height: 19px;
}

.star ul {
	margin: 0 10px;
}

.star li {
	float: left;
	width: 26px;
	cursor: pointer;
	text-indent: -9999px;
	background: url(<%=path%>/img/wechat/star.png) no-repeat;
}

.star strong {
	color: #f60;
	padding-left: 10px;
}

.star li.on {
	background-position: 0 -28px;
}

.star p {
	position: absolute;
	top: 20px;
	width: 159px;
	height: 60px;
	display: none;
	padding: 7px 10px 0;
}

.star p em {
	color: #f60;
	display: block;
	font-style: normal;
}
</style>


<script type="text/javascript">
	function saveSatisfaction() {

		var satisfaction = $("#satisfaction").val();

		if (satisfaction == "" || satisfaction == undefined || satisfaction == "0") {
			alert("请选择满意度！");
			return false;
		}

		if (satisfaction == "2" || satisfaction == "1") {
			var customerOpinion = $("#customerOpinion").val();
			if (customerOpinion == "" || customerOpinion == undefined) {
				alert("请给予我们评价意见，我们 会做得更好！");
				return false;
			}
		}
		$("#processBtn").html("提交评分中...");
		$("#saveGiveSatisfactionForm").submit();
	}
</script>


<c:choose>
	<c:when test="${cusUser.enable eq false }">
		<div class="box_title" style="color:red">对不起，离职人员不能进行评价</div>
		<jsp:include page="basicInfo.jsp"></jsp:include>
	</c:when>
	<c:when test="${model.areFeedback eq false }">
		<div class="box_title">请评价工程师本次处理结果</div>
		<div class="ui-body">
			<c:choose>
				<c:when test="${diffDay lt 14 }">
					<form:form commandName="model" cssClass="validate"
						id="saveGiveSatisfactionForm" action="saveGiveSatisfaction">
						<input type="hidden" id="satisfaction" name="satisfaction"
							value="${model.satisfaction }" />
						<input type="hidden" id="satisfactionQuality"
							name="satisfactionQuality" value="${model.satisfactionQuality }" />
						<input type="hidden" id="satisfactionApproach"
							name="satisfactionApproach"
							value="${model.satisfactionApproach }" />
						<input type="hidden" id="satisfactionTimely"
							name="satisfactionTimely" value="${model.satisfactionTimely }" />
						<div style="display: none">
							<input type="hidden" name="openid" value="${openid }"> <input
								name="id" type="hidden" value="${model.id }"><input
								type="hidden" name="processId" value="${model.processId }">
						</div>
						<table class="form-table">
							<tr style="">
								<td colspan="2">
									<div id="processBtn" style="text-align: center;padding:10px;">
										<button type="button" onclick="saveSatisfaction();" value=""
											style="line-height:14px;">提交评分</button>
									</div>
								</td>
							</tr>
							<tr>
								<td class="td1"><label>满意度：</label></td>
								<td id="satisficationsTd" align="left">

									<div id="star" class="star">
										<span></span>
										<ul>
											<li><a href="javascript:;">1</a></li>
											<li><a href="javascript:;">2</a></li>
											<li><a href="javascript:;">3</a></li>
											<li><a href="javascript:;">4</a></li>
											<li><a href="javascript:;">5</a></li>
										</ul>
										<span></span>
										<p></p>
									</div> &nbsp;&nbsp;</td>
							</tr>
							<tr class="research" style="display: none;">
								<td class="td1"><label>技能水平：</label></td>
								<td id="satisficationsTd1">

									<div id="star1" class="star">
										<span></span>
										<ul>
											<li><a href="javascript:;">1</a></li>
											<li><a href="javascript:;">2</a></li>
											<li><a href="javascript:;">3</a></li>
											<li><a href="javascript:;">4</a></li>
											<li><a href="javascript:;">5</a></li>
										</ul>
										<span></span>
										<p></p>
									</div> &nbsp;&nbsp;</td>
							</tr>
							<tr class="research" style="display: none;">
								<td class="td1"><label>服务态度：</label></td>
								<td id="satisficationsTd2">

									<div id="star2" class="star">
										<span></span>
										<ul>
											<li><a href="javascript:;">1</a></li>
											<li><a href="javascript:;">2</a></li>
											<li><a href="javascript:;">3</a></li>
											<li><a href="javascript:;">4</a></li>
											<li><a href="javascript:;">5</a></li>
										</ul>
										<span></span>
										<p></p>
									</div> &nbsp;&nbsp;</td>
							</tr>
							<tr class="research" style="display: none;">
								<td class="td1"><label>服务及时性：</label></td>
								<td id="satisficationsTd3">

									<div id="star3" class="star">
										<span></span>
										<ul>
											<li><a href="javascript:;">1</a></li>
											<li><a href="javascript:;">2</a></li>
											<li><a href="javascript:;">3</a></li>
											<li><a href="javascript:;">4</a></li>
											<li><a href="javascript:;">5</a></li>
										</ul>
										<span></span>
										<p></p>
									</div> &nbsp;&nbsp;</td>
							</tr>
							<tr>
								<td class="td1"><label for="textarea">是否确认：</label>
								</td>
								<td class="td2"><input type="radio"
									style="border:1px #93BEE2 solid;" name="areLink" value="1"
									id="req1" checked="checked"><label for="req1">是</label><input
									type="radio" style="border:1px #93BEE2 solid;" name="areLink"
									value="0" id="req2"><label for="req2">否</label>（事件处理后工程师是否有跟您确认）
								</td>
							</tr>
							<tr>
								<td class="td1"><label for="textarea">客户意见：</label>
								</td>
								<td class="td2"><form:textarea path="customerOpinion"
										cssClass="required" style="height:50px;" /> <br></td>
							</tr>

						</table>
					</form:form>
				</c:when>
				<c:otherwise>
					<div id="satisfactionTimeout">
						<h1>对不起，您已超过了评价时间</h1>
					</div>
				</c:otherwise>
			</c:choose>
			<div class="ui-body">
				<jsp:include page="basicInfo.jsp"></jsp:include>
			</div>
	</c:when>
	<c:otherwise>
		<div class="box_title" style="color:red;text-align: center"><span>您已评价，谢谢参与！</span></div>
		<jsp:include page="basicInfo.jsp"></jsp:include>
	</c:otherwise>
</c:choose>

</div>

<script type="text/javascript">
	window.onload = function() {
		var diffDay = ${diffDay};
		var areFeedback = '${model.areFeedback}';
		if (diffDay < 30 && areFeedback == 'false') {
			var oStar1 = document.getElementById("star");
			satisfactionAction(oStar1);
			var oStar2 = document.getElementById("star1");
			satisfactionAction(oStar2);
			var oStar3 = document.getElementById("star2");
			satisfactionAction(oStar3);
			var oStar4 = document.getElementById("star3");
			satisfactionAction(oStar4);
		}
	};
	
	//评分处理
	function fnPoint(iArg, iStar, aLi) {
		//分数赋值
		iScore = iArg || iStar;
		for (i = 0; i < aLi.length; i++)
			aLi[i].className = i < iScore ? "on" : "";
	}

	var clearResearch = function(oStar) {
		var sid = $(oStar).attr("id");
		var oP = oStar.getElementsByTagName("p")[0];
		var aLi = oStar.getElementsByTagName("li");
		var oSpan = oStar.getElementsByTagName("span")[1];
		fnPoint(0, 0, aLi);
		oP.innerHTML = "";
		oSpan.innerHTML = "";
		oP.style.display = "none";
		if (sid == "star1") {
			$("#satisfactionQuality").val(0);
		} else if (sid == "star2") {
			$("#satisfactionApproach").val(0);
		} else if (sid == "star3") {
			//satisfactionTimely
			$("#satisfactionTimely").val(0);
		}
	};

	//清空评分
	var clearAllResearch = function() {
		clearResearch(document.getElementById("star1"));
		clearResearch(document.getElementById("star2"));
		clearResearch(document.getElementById("star3"));
	};
	
	function satisfactionAction(oStar) {
		var sid = $(oStar).attr("id");
		var aLi = oStar.getElementsByTagName("li");
		var oUl = oStar.getElementsByTagName("ul")[0];
		var oSpan = oStar.getElementsByTagName("span")[1];
		var oP = oStar.getElementsByTagName("p")[0];
		var i = iScore = iStar = 0;
		var aMsg = [ " |很不满意", " |不满意", " |一般", " |满意", " |非常满意" ]

		for (i = 1; i <= aLi.length; i++) {
			aLi[i - 1].index = i;

			//鼠标移过显示分数
			aLi[i - 1].onmouseover = function() {
				fnPoint(this.index, iStar, aLi);
				//浮动层显示
				oP.style.display = "block";
				//计算浮动层位置
				oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 40 + "px";
				//匹配浮动层文字内容
				oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em>" + aMsg[this.index - 1].match(/\|(.+)/)[1]
			};

			//鼠标离开后恢复上次评分
			aLi[i - 1].onmouseout = function() {
				var index_ = 0;
				if (sid == "star") {
					index_ = $("#satisfaction").val();
				} else if (sid == "star1") {
					index_ = $("#satisfactionQuality").val();
				} else if (sid == "star2") {
					index_ = $("#satisfactionApproach").val();
				} else if (sid == "star3") {
					index_ = $("#satisfactionTimely").val();
				}

				fnPoint(index_, iStar, aLi);
				//关闭浮动层
				oP.style.display = "none"
			};

			//点击后进行评分处理
			aLi[i - 1].onclick = function() {

				iStar = this.index;
				if (sid == "star") {
					$("#satisfaction").val(iStar);
					if (iStar == 1 || iStar == 2) {
						$(".research").show();
					} else {
						$(".research").hide();
						clearAllResearch();
					}
				} else if (sid == "star1") {
					$("#satisfactionQuality").val(iStar);
				} else if (sid == "star2") {
					$("#satisfactionApproach").val(iStar);
				} else if (sid == "star3") {
					//satisfactionTimely
					$("#satisfactionTimely").val(iStar);
				}
				oP.style.display = "none";
				oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")"
			}
		}
	}
</script>



